<template>
  <div>
    <div>使用组件对象为弹窗内部组件</div>
    <div>
      <button @click="handleAdd()">新增用户</button>
    </div>
    <div v-for="(item, index) in list" :key="index">
      <button @click="handleClick(item)">选择分类</button> / {{ item.userId }} /
      {{ JSON.stringify(item.categorys) }}
    </div>
  </div>
</template>

<script>
import { QqtSelectTable } from "@qqt/sdk";

const selectUserComponent = {
  components: { QqtSelectTable },
  props: {
    defaultValue: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      valueKey: "cateCode",
      labelKey: "cateName",
      filterItems: [
        {
          field: "cateCode",
          title: "编号",
          span: 8,
          itemRender: {
            name: "$input",
          },
        },
        {
          field: "cateName",
          title: "名称",
          span: 8,
          itemRender: {
            name: "$input",
          },
        },
      ],
      tableColumns: [
        { field: "cateCode", title: "编码", width: 120, fixed: "left" },
        { field: "cateName", title: "名称", width: 180 },
        { field: "cateStatus_dictText", title: "状态" },
      ],
      multiple: true,
    };
  },
  methods: {
    async getTableData({ query }) {
      const filterQuery = {
        size: query.size,
        page: query.page - 1,
      };
      filterQuery["cateCode"] = query.cateCode;
      filterQuery["cateName"] = query.cateName;

      // const res = await request({
      //   url: "/services/admin/api/srmCommon/queryParamFirstLevelPageList",
      //   method: "get",
      //   params: filterQuery,
      // });
      const res = {
        // 模拟数据
        success: true,
        result: {
          records: [
            {
              cateCode: "1",
              cateName: "1",
              cateStatus: "1",
              cateStatus_dictText: "正常",
            },
            {
              cateCode: "2",
              cateName: "2",
              cateStatus: "2",
              cateStatus_dictText: "正常",
            },
          ],
          total: 2,
        },
      };
      if (res.success) {
        return {
          data: res.result.records,
          total: res.result.total,
          success: true,
          msg: res.message,
        };
      } else {
        return {
          success: false,
          msg: res.message,
        };
      }
    },
  },
  render(h) {
    return h(QqtSelectTable, {
      props: {
        valueKey: this.valueKey,
        labelKey: this.labelKey,
        filterItems: this.filterItems,
        tableColumns: this.tableColumns,
        getTableData: this.getTableData,
        multiple: this.multiple,
        defaultValue: this.defaultValue,
      },
      on:this.$listeners,
    });
  },
};
export default {
  data() {
    return{
      list: [
        {
          userId: "1",
          userName: "1",
          categorys: [
            {
              categoryCode: "1",
              categoryName: "1",
            },
            {
              categoryCode: "2",
              categoryName: "2",
            },
          ],
        },
      ],
    };
  },
  methods: {
    async handleAdd() {
      const component = selectUserComponent;
      // const component = () => import("./components/SelectSrmCategory.vue");// 当组件为文件时
      const dialog = await this.$dialog(component, {
        props: {
          defaultValue: this.list.map((item) => {
                return {
                  cateCode: item.userId,
                  cateName: item.userName,
                };
              }),
        },
        on: {
          onCancel: () => {
            dialog.handleClose();
          },
          onConfirm: (data) => {
            // 选择的表格数据转换为 现在的数据结构
            const fomattData = data.map((item) => {
              return {
                userId: item.cateCode,
                userName: item.cateName,
                categorys: [], // 初始化默认值
              };
            });
            // 与已有数据合并
            const newData = fomattData.map((item) => {
              let obj = this.list.find(
                (n) => item.userId === n.userId
              );
              return obj ? obj : item;
            });
            this.list = newData;
            dialog.handleClose();
          },
        },
      });
    },
    async handleClick(row) {
      const component = selectUserComponent;
      // const component = () => import("./components/SelectSrmCategory.vue");// 当组件为文件时
      const dialog = await this.$dialog(component, {
        props: {
          defaultValue: row.categorys // 获取默认选中项, 转换为弹窗需要的格式
            ? row.categorys.map((item) => {
                return {
                  cateCode: item.categoryCode,
                  cateName: item.categoryName,
                };
              })
            : [],
        },
        on: {
          onCancel: () => {
            dialog.handleClose();
          },
          onConfirm: (data) => {
            // 选择的表格数据转换为 现在的数据结构
            const fomattData = data.map((item) => {
              return {
                categoryCode: item.cateCode,
                categoryName: item.cateName,
              };
            });
            // 与已有数据合并
            const newData = fomattData.map((item) => {
              row.categorys = row.categorys || [];
              let obj = row.categorys.find(
                (n) => item.categoryCode === n.categoryCode
              );
              return obj ? obj : item;
            });
            row.categorys = newData;
            dialog.handleClose();
          },
        },
      });
    },
  },
};
</script>

<style></style>
